<template>
  <div class="map-wrapper">
    <div id="china-map" class="map-container"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

const initMap = async () => {
  const chartDom = document.getElementById('china-map');
  const myChart = echarts.init(chartDom);

  try {
    const response = await fetch('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json');
    if (!response.ok) throw new Error('Failed to load map data');
    const chinaMapData = await response.json();

    echarts.registerMap('china', chinaMapData);

    const option = {
      title: {
        text: '中国地图',
        left: 'center',
        textStyle: {
          color: '#ffffff'
        }
      },
      tooltip: {
        trigger: 'item'
      },
      visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: true,
        inRange: {
          color: ['#e0ffff', '#006edd']
        },
        textStyle: {
          color: '#ffffff'
        }
      },
      series: [
        {
          name: '数据',
          type: 'map',
          map: 'china',
          roam: false,
          label: {
            show: true,
            color: '#ffffff'
          },
          data: [
            { name: '北京', value: 100 },
            { name: '上海', value: 200 }
          ]
        }
      ]
    };

    myChart.setOption(option);
  } catch (error) {
    console.error('Error loading map data:', error);
  }
};

onMounted(() => {
  initMap();
});
</script>

<style scoped>
.map-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; /* 调整父容器的高度 */
}

.map-container {
  width: 90%;
  height: 100%;
  background: none;
  border-radius: 10px;
  box-shadow: none;
  transition: all 0.3s ease;
  color: #ffd700; /* 金色字体 */
}

.map-container:hover {
  transform: scale(1.02);
}
</style> 